<template>
  <div class="group_27 flex-col">
    <div class="group_3 flex-col">
      <span class="text_8">行业VOC数据库管理与查询系统</span>
      <div class="block_6 flex-row">
        <span class="text_9"
          ><el-radio v-model="radio" label="1" style="color: white"
            >行业VOCs</el-radio
          ></span
        >
        <span class="text_9_"></span>
        <span class="text_9"
          ><el-radio v-model="radio" label="2" style="color: white"
            >生物气溶胶</el-radio
          ></span
        >
        <span class="text_9_"></span>
        <img
          class="thumbnail_5"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7133e93a9ef896462357ca016548ff6ae400e45cc1fdf14e7164d3424482b5bb"
          @click="gotoSerachIntro"
        />
        <span class="text_11" @click="gotoSerachIntro()">查询说明</span>
      </div>
      <div class="block_7 flex-row justify-between">
        <div class="image-text_17 flex-col">
          <el-input
            placeholder="请输入查询内容如 C6H6"
            prefix-icon="el-icon-search"
            v-model="content"
          >
            <template #append>
              <button
                style="
                  font-size: 18px;
                  color: white;
                  font-family: SourceHanSansCN-Regular;
                  font-weight: normal;
                  cursor: pointer;
                "
                type="primary"
                @click="Search()"
              >
                搜索
              </button>
            </template>
          </el-input>
          <span class="text-group_2" @click="Search()"
            >请输入分子式名称查询内容，如需更多查询选项请点击&nbsp;<span
              style="color: #4295e3;cursor: pointer;"
              >高级搜索</span
            ></span
          >
          <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb092e5c959093dd55fa948ff4b0d8244f09f45d01e6878b981fbf8b10b5fe922"
          />
        </div>
      </div>
    </div>
    <img
      class="image_3"
      referrerpolicy="no-referrer"
      src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng29ce6bf16bc0e56d5c60a476f18a496b33e70e3fa5e6bf33ca5f53865c31b817"
    />
    <div class="box_19 flex-row justify-between">
      <div class="text-group_23 flex-col justify-between">
        <span class="text_14">新闻动态</span>
        <span class="text_15">NEWS</span>
      </div>
      <span class="text_16" @click="gotoNews()">MORE&nbsp;&gt;&gt;</span>
    </div>
    <div class="box_20 flex-row justify-between">
      <div class="box_21 flex-col">
        <span class="text_17">打造一座“科研岛”——安太成与他的科研创新团队</span>
        <span class="text_18" @click="openLink(news[0].url)"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.news[0].content }}</span
        >
        <span class="text_19" @click="openLink(news[1].url)"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.news[1].content }}</span
        >
        <div class="group_28 flex-row justify-between">
          <div class="text-wrapper_3 flex-col">
            <span class="text_20">{{ this.newsType[2] }}</span>
          </div>
          <span class="text_21" @click="openLink(news[2].url)"
            >{{ this.news[2].content }}</span
          >
        </div>
        <div class="group_29 flex-row justify-between">
          <div class="text-wrapper_4 flex-col">
            <span class="text_22">{{ this.newsType[3] }}</span>
          </div>
          <span class="text_23" @click="openLink(news[3].url)"
            >{{ this.news[3].content }}</span
          >
        </div>
      </div>
      <div class="box_22 flex-col justify-between">
        <span class="text_24" @click="openLink(news[4].url)"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.news[4].content }}</span
        >
        <span class="text_25" @click="openLink(news[5].url)"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.news[5].content }}</span
        >
        <span class="text_26" @click="openLink(news[6].url)"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.news[6].content }}</span
        >
        <div class="section_7 flex-row justify-between">
          <div class="text-wrapper_5 flex-col">
            <span class="text_27">{{ this.newsType[7] }}</span>
          </div>
          <span class="text_28" @click="openLink(news[7].url)">{{ this.news[7].content }}</span>
        </div>
        <div class="section_8 flex-row justify-between">
          <div class="text-wrapper_6 flex-col">
            <span class="text_29">{{ this.newsType[8] }}</span>
          </div>
          <span class="text_30" @click="openLink(news[8].url)">{{ this.news[8].content }}</span>
        </div>
      </div>
    </div>
    <div class="text-wrapper_7 flex-col">
      <span class="text_31">{{ this.newsType[0] }}</span>
    </div>
    <div class="text-wrapper_8 flex-col">
      <span class="text_32">{{ this.newsType[4] }}</span>
    </div>
    <div class="text-wrapper_9 flex-col">
      <span class="text_33">{{ this.newsType[5] }}</span>
    </div>
    <div class="text-wrapper_10 flex-col">
      <span class="text_34">{{ this.newsType[6] }}</span>
    </div>
    <div class="text-wrapper_11 flex-col">
      <span class="text_35">{{this.newsType[1]}}</span>
    </div>
  </div>
</template>
  
  <script>
import { getNews } from "@/api/publicSearch";
export default {
  data() {
    return {
      radio: "1",
      content: "",
      news: [],
      newsType: [],
    };
  },
  methods: {
    gotoSerachIntro() {
      this.$router.push("/serachIntro");
    },
    gotoSearch(){
      this.$router.push("/search");
    },
    gotoNews() {
      this.$router.push("/news");
    },
    Search(){
      if(this.radio=="1"){
        this.$router.push("/search");
        this.$store.dispatch("changeVoc", this.content);
      }
      if(this.radio=="2"){
        this.$router.push("/aerosol");
      }
    },
    openLink(url) {
      console.log("111")
      window.open(url, "_blank");
    },
  },
  mounted() {
    getNews().then((res) => {
      this.news = res.data.data.slice(1, 10);
      this.news.forEach((item)=>{
        // 使用正则表达式提取内容并存放到数组中
        var extractedContent = item.content.match(/【([^】]+)】/);
        // 如果提取到内容，则获取提取的内容，否则为空字符串
        var extractedText = extractedContent ? extractedContent[1] : '';
        // 存入数组
        this.newsType.push(extractedText)
        item.content = item.content.replace(/【.*?】/g, "");
      })
    });
  },
};
</script>
  
  <style lang="scss" scoped>
/* 第一个CSS样式 */
.group_27 {
  position: relative;
  width: 1440px;
  height: 939px;
  .group_3 {
    width: 1440px;
    height: 420px;
    background: url(../assets/SketchPng32bc269359ee843a53de8c11174d2398f0d5d32068af7fbfd93c35939febb231)
      100% no-repeat;
    background-size: 100% 100%;
    .text_8 {
      width: 724px;
      height: 48px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 40px;
      font-family: SourceHanSansCN-Bold;
      font-weight: 700;
      text-align: justify;
      white-space: nowrap;
      line-height: 48px;
      margin: 96px 0 0 332px;
    }
    .block_6 {
      width: 374px;
      height: 30px;
      margin: 34px 0 0 332px;
      .thumbnail_3 {
        width: 16px;
        height: 16px;
        margin-top: 1px;
      }
      .text_9 {
        width: 74px;
        height: 30px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 24px;
        margin-left: 8px;
      }
      .thumbnail_4 {
        width: 16px;
        height: 16px;
        margin-left: 32px;
      }
      .text_10 {
        width: 82px;
        height: 30px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        line-height: 24px;
        margin-left: 8px;
      }
      .thumbnail_5 {
        width: 16px;
        height: 16px;
        margin-left: 32px;
        cursor: pointer;
      }
      .text_11 {
        width: 82px;
        height: 30px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 24px;
        margin-left: 8px;
        cursor: pointer;
      }
    }
    .block_7 {
      width: 776px;
      height: 66px;
      margin: 0 0 146px 332px;
      .image-text_17 {
        width: 640px;
        height: 66px;
        .group_4 {
          background-color: rgba(0, 25, 52, 0.3);
          border-radius: 8px;
          height: 40px;
          border: 1px solid rgba(255, 255, 255, 1);
          width: 640px;
          position: relative;
          .block_2 {
            background-color: rgba(0, 151, 234, 1);
            border-radius: 0px 8px 8px 0px;
            width: 80px;
            height: 40px;
            margin-left: 560px;
          }
          .block_3 {
            border-radius: 8px;
            position: absolute;
            left: 0;
            top: 0;
            width: 640px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 1);
            .image-text_18 {
              width: 224px;
              height: 16px;
              margin: 12px 0 0 29px;
              .thumbnail_15 {
                width: 16px;
                height: 16px;
              }
              .text-group_1 {
                width: 200px;
                height: 16px;
                overflow-wrap: break-word;
                color: rgba(99, 159, 209, 1);
                font-size: 16px;
                font-family: SourceHanSansCN-Regular;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 24px;
              }
            }
            .text_12 {
              width: 32px;
              height: 18px;
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 16px;
              font-family: SourceHanSansCN-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24px;
              margin: 12px 24px 0 331px;
            }
            .image-text_19 {
              position: absolute;
              left: 29px;
              top: 12px;
              width: 224px;
              height: 16px;
              .thumbnail_15 {
                width: 16px;
                height: 16px;
              }
              .text-group_1 {
                width: 200px;
                height: 16px;
                overflow-wrap: break-word;
                color: rgba(99, 159, 209, 1);
                font-size: 16px;
                font-family: SourceHanSansCN-Regular;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 24px;
              }
            }
          }
        }
        .text-group_2 {
          width: 527px;
          height: 18px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
          font-family: SourceHanSansCN-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 21px;
          margin-top: 8px;
        }
        .image_2 {
          width: 56px;
          height: 1px;
          margin: -1px 0 0 342px;
        }
      }
      .text-wrapper_2 {
        background-color: rgba(0, 151, 234, 1);
        border-radius: 8px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 1);
        width: 120px;
        .text_13 {
          width: 82px;
          height: 30px;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          font-family: SourceHanSansCN-Regular;
          font-weight: normal;
          text-align: center;
          white-space: nowrap;
          line-height: 24px;
          margin: 12px 0 0 19px;
        }
      }
    }
  }
  .image_3 {
    width: 1264px;
    height: 1px;
    margin: 57px 0 0 88px;
  }
  .box_19 {
    width: 1264px;
    height: 60px;
    margin: 23px 0 0 88px;
    .text-group_23 {
      width: 128px;
      height: 60px;
      .text_14 {
        width: 128px;
        height: 32px;
        overflow-wrap: break-word;
        color: rgba(0, 84, 190, 1);
        font-size: 32px;
        font-family: SourceHanSansCN-Bold;
        font-weight: 700;
        text-align: justify;
        white-space: nowrap;
        line-height: 48px;
      }
      .text_15 {
        width: 70px;
        height: 24px;
        overflow-wrap: break-word;
        color: rgba(0, 84, 190, 1);
        font-size: 24px;
        font-family: SourceHanSansCN-Bold;
        font-weight: 700;
        text-align: justify;
        white-space: nowrap;
        line-height: 36px;
        margin-top: 4px;
      }
    }
    .text_16 {
      width: 74px;
      height: 14px;
      overflow-wrap: break-word;
      color: rgba(0, 84, 190, 1);
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: right;
      white-space: nowrap;
      line-height: 21px;
      cursor: pointer;
    }
  }
  .box_20 {
    width: 1266px;
    height: 285px;
    margin: 20px 0 73px 88px;
    .box_21 {
      width: 603px;
      height: 260px;
      .text_17 {
        width: 552px;
        height: 24px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 24px;
        
      }
      .text_18 {
        width: 600px;
        height: 48px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin-top: 30px;
        cursor: pointer;
      }
      .text_19 {
        width: 592px;
        height: 48px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin-top: 20px;
        cursor: pointer;
      }
      .group_28 {
        width: 603px;
        height: 28px;
        margin-top: 20px;
        .text-wrapper_3 {
          border-radius: 4px;
          height: 20px;
          border: 1px solid rgba(32, 73, 125, 1);
          margin-top: 8px;
          width: 40px;
          .text_20 {
            width: 32px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(32, 73, 125, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            margin: -2px 0 0 3px;
          }
        }
        .text_21 {
          width: 555px;
          height: 24px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: SourceHanSansCN-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24px;
          margin-top: 6px;
          cursor: pointer;
        }
      }
      .group_29 {
        width: 602px;
        height: 28px;
        margin-top: 20px;
        .text-wrapper_4 {
          border-radius: 4px;
          height: 20px;
          border: 1px solid rgba(32, 73, 125, 1);
          margin-top: 8px;
          width: 40px;
          .text_22 {
            width: 33px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(32, 73, 125, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            margin: -2px 0 0 3px;
          }
        }
        .text_23 {
          width: 554px;
          height: 24px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: SourceHanSansCN-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24px;
          margin-top: 6px;
          cursor: pointer;
        }
      }
    }
    .box_22 {
      width: 592px;
      height: 280px;
      margin-top: 5px;
      .text_24 {
        width: 592px;
        height: 48px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin-top: 6px;
        cursor: pointer;
      }
      .text_25 {
        width: 592px;
        height: 48px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin-top: 20px;
        cursor: pointer;
      }
      .text_26 {
        width: 592px;
        height: 48px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin-top: 20px;
        cursor: pointer;
      }
      .section_7 {
        width: 571px;
        height: 28px;
        margin-top: 20px;
        .text-wrapper_5 {
          border-radius: 4px;
          height: 20px;
          border: 1px solid rgba(32, 73, 125, 1);
          margin-top: 8px;
          width: 40px;
          .text_27 {
            width: 32px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(32, 73, 125, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            margin: -2px 0 0 3px;
          }
        }
        .text_28 {
          width: 523px;
          height: 24px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: SourceHanSansCN-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24px;
          margin-top: 6px;
          cursor: pointer;
        }
      }
      .section_8 {
        width: 306px;
        height: 28px;
        margin-top: 20px;
        .text-wrapper_6 {
          border-radius: 4px;
          height: 20px;
          border: 1px solid rgba(32, 73, 125, 1);
          margin-top: 8px;
          width: 40px;
          .text_29 {
            width: 32px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(32, 73, 125, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            margin: -2px 0 0 3px;
          }
        }
        .text_30 {
          width: 258px;
          height: 24px;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-family: SourceHanSansCN-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 24px;
          margin-top: 6px;
          cursor: pointer;
        }
      }
    }
  }
  .text-wrapper_7 {
    border-radius: 4px;
    height: 20px;
    border: 1px solid rgba(32, 73, 125, 1);
    width: 40px;
    position: absolute;
    left: 88px;
    top: 637px;
    .text_31 {
      width: 32px;
      height: 16px;
      overflow-wrap: break-word;
      color: rgba(32, 73, 125, 1);
      font-size: 16px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: justify;
      white-space: nowrap;
      line-height: 24px;
      margin: -2px 0 0 3px;
    }
  }
  .text-wrapper_8 {
    border-radius: 4px;
    height: 20px;
    border: 1px solid rgba(32, 73, 125, 1);
    width: 40px;
    position: absolute;
    left: 762px;
    top: 594px;
    .text_32 {
      width: 32px;
      height: 16px;
      overflow-wrap: break-word;
      color: rgba(32, 73, 125, 1);
      font-size: 16px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: justify;
      white-space: nowrap;
      line-height: 24px;
      margin: -2px 0 0 3px;
    }
  }
  .text-wrapper_9 {
    border-radius: 4px;
    height: 20px;
    border: 1px solid rgba(32, 73, 125, 1);
    width: 40px;
    position: absolute;
    left: 762px;
    top: 662px;
    .text_33 {
      width: 32px;
      height: 16px;
      overflow-wrap: break-word;
      color: rgba(32, 73, 125, 1);
      font-size: 16px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: justify;
      white-space: nowrap;
      line-height: 24px;
      margin: -2px 0 0 3px;
    }
  }
  .text-wrapper_10 {
    border-radius: 4px;
    height: 20px;
    border: 1px solid rgba(32, 73, 125, 1);
    width: 40px;
    position: absolute;
    left: 762px;
    top: 730px;
    .text_34 {
      width: 32px;
      height: 16px;
      overflow-wrap: break-word;
      color: rgba(32, 73, 125, 1);
      font-size: 16px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: justify;
      white-space: nowrap;
      line-height: 24px;
      margin: -2px 0 0 3px;
    }
  }
  .text-wrapper_11 {
    border-radius: 4px;
    height: 20px;
    border: 1px solid rgba(32, 73, 125, 1);
    width: 40px;
    position: absolute;
    left: 88px;
    top: 705px;
    .text_35 {
      width: 32px;
      height: 16px;
      overflow-wrap: break-word;
      color: rgba(32, 73, 125, 1);
      font-size: 16px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: justify;
      white-space: nowrap;
      line-height: 24px;
      margin: -2px 0 0 3px;
    }
  }
}
/* 第二个CSS样式 */
@import "@/css/common.scss";
.text_9_ {
  width: 24px;
  height: 30px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 8px;
}
.btn {
  width: 54px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  align-items: center;
}
// 搜索框
::v-deep .el-input-group__append,
.el-input-group__prepend {
  background-color: #4295e3;
  color: #ffffff;
  border: 0px solid #dcdfe6;
}
</style>